<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
 
<script type="text/javascript">

	$(document).ready(function() {
		
		//绑定回车事件
		$(':input').bind('keyup', function(event){
		   if (event.keyCode=="13"){
		   		$("#base_info_form").submit();
		   }
		});
		
		$.metadata.setType("attr", "validate");
		$("#base_info_form").validate({
			submitHandler: function() {
				if ($("#base_info_form").find("#addBaby").find("#year").val() == ""
					|| $("#base_info_form").find("#addBaby").find("#month")
							.val() == ""
						|| $("#base_info_form").find("#addBaby").find("#day").val() == "") {
					$("#errorBirthday").html("请选择宝宝生日");
					return;
				}
				var arrayBaby = new Array();
				$(".baby").each(
						function(i) {
							arrayBaby.push({
								"identifier" : $(this).find("#identifier").val(),
								"babyName" : $(this).find("#babyName" + i).val(),
								"birthday" : $(this).find("#year").val() + '-'
										+ $(this).find("#month").val() + '-'
										+ $(this).find("#day").val(),
								"babySex" : $(this).find(" :radio[checked]").val()
							});
						});
				var babyAll = new BabyAll();
				babyAll.babyList = arrayBaby;
				babyAll.babyName = $("#addBaby").find("#addBabyName").val();
				babyAll.birthday = $("#addBaby").find("#year").val() + '-'
						+ $("#addBaby").find("#month").val() + '-'
						+ $("#addBaby").find("#day").val();
				babyAll.babySex = $("#addBaby").find(" :radio[checked]").val();
				//如果没有没有宝宝并且没有进行任何操作
				if("${fn:length(babyList)==0}" && babyAll.babyName=="" && arrayBaby.length==0){
					$('#noHandle').show();
					setTimeout("$('#noHandle').hide()",3000);
					return;
				}
				$("#saveButton").attr("onclick","");
				$.ajax({
					type : 'post',
					url : 'saveBabyInfo.htm',
					data : {
						jsonData : escape($.toJSON(babyAll))
					},
					success : function(data) {
						if (data == 'success') {
							$("#member_info_detail").load("babyInfo.htm",
									function() {
										showSuccess();
										refreshBabysAvatar();
									});
							$("#jiaZiLiao3").attr("class", "current");
						}
					}
				});
			}
		});
	});
	
	function deleteBaby(id,avatar){
		 $("#delete_baby_submit").attr("onclick","").unbind('click'); 
			$("#delete_baby_dialog_avatar").attr("src",avatar);
			$("#delete_baby_dialog").show();
			$("#delete_baby_submit").bind("click",function(){
				$.post("deleteBabyInfo.htm",{
					identifier:id
				},function(data){
					if(data=="success"){
						$("#member_info_detail").load("babyInfo.htm",
								function() {
									showSuccess();
									refreshBabysAvatar();
								});
						$("#jiaZiLiao3").attr("class", "current");
					}
				});
			});
	}
	
	function deleteBabyCancel(){
		$("#delete_baby_submit").unbind('click'); 
		$("#delete_baby_dialog").hide();
	}

	function addBaby() {
		if ($("#tianShan").html() == "【添加宝宝】") {
			$("#before").before($("#tianjiaBaby").html());
			$("#tianShan").html("【删除】");
		} else {
			$("#base_info_form").find("#addBaby").remove();
			$("#tianShan").html("【添加宝宝】");
		}

	}

	function xiuGai(id, id2) {
		$("#" + id).show();
		$("#" + id2).remove();
	}
</script>
 
	<div class="success" id="base_info_tip_success" style="display: none; margin-left: 32px;">
		<img alt="修改成功" src="<%=basePath%>images/home_images/ico29.png">宝宝信息修改成功
	</div>
	<form action="" id="base_info_form">
		<div class="h_dataInfo">
			<div id="noHandle" style="color: red; display: none;">您还没有添加宝宝不能保存哦</div>
			<c:forEach items="${babyList}" var="baby" varStatus="v">
				<table width="350" class="baby" id="baby${v.index}">
					<tr>
						<td class="data_text" width="70">宝宝姓名：<input type="hidden"
							id="identifier" value="${baby.identifier }" /></td>
						<td width="280"><input type="text"
							validate="{required:true,maxlength:20,messages:{required:'宝宝姓名不能为空',maxlength:'长度不能超过20个字符'}}"
							style="display: none" value="${baby.babyName}" size="10"
							id="babyName${v.index }" name="babyName${v.index }"><span
							id="xiuGaiBabyName${v.index }">${baby.babyName}<strong><a
									href="javascript:void(0)"
									onclick="xiuGai('babyName${v.index }','xiuGaiBabyName${v.index }')">【修改】</a>
									<a href="javascript:void(0);" onclick="deleteBaby('${baby.identifier}','${baby.babyAvatar }')">【删除】</a>
							</strong>
						</span>
						</td>
					</tr>
					<tr>
						<td class="data_text" width="70">宝宝生日：</td>
						<td width="280"><select id="year" name="year"></select>年 <select
							id="month" name="month"></select>月 <select id="day" name="day"></select>日
						</td>
					</tr>
					<tr>
						<td width="70" class="data_text">宝宝性别：</td>
						<td width="280"><input type="radio" name="sex${v.index }" value="M"
							<c:if test="${baby.babySex=='M'}">checked</c:if> />男&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="sex${v.index }" value="F"
							<c:if test="${baby.babySex=='F'}">checked</c:if> />女</td>
					</tr>
					<tr>
						<td width="70" class="data_text">宝宝头像：</td>
						<td width="280"><input type="button" value="上传图片"
							onclick="uploadAvatar(3,'${baby.identifier}');" /></td>
					</tr>
					<tr>
						<td colspan="2"><hr width="100%">
						</td>
					</tr>
				</table>
				<script type="text/javascript">
					yearMonthDay($("#baby${v.index}"), '${baby.birthday}');
				</script>
			</c:forEach>

			<table id="before">
				<tr>
					<td align="right" class="data_text"><strong><a
							href="javascript:void(0)" id="tianShan" onclick="addBaby()">【添加宝宝】</a>
					</strong>
					</td>
				</tr>
			</table>
		</div>
		<table>
			<tr>
				<td width="135"></td>
				<td width="524">
					<div class="h_button w75 mt15"><strong onclick="javascript:$('#base_info_form').submit();" id="saveButton">保存设置</strong></div>
				</td>
			</tr>
		</table>
	</form>
	<div class="pop_avatar" id="pop_avatar_div" style="display: none;">
	</div>
	<div class="d_pa" style="display: none;" id="cut_avatar"></div>
	<div id="tianjiaBaby" style="display: none;">
		<table width="350" id="addBaby" class="addBaby">
			<tr>
				<td width="70" class="data_text">宝宝姓名：</td>
				<td width="280"><input type="text" size="10"
					validate="{required:true,maxlength:20,messages:{required:'宝宝姓名不能为空',maxlength:'长度不能超过20个字符'}}"
					id="addBabyName" name="addBabyName">
				</td>
			</tr>
			<tr>
				<td width="70" class="data_text">宝宝生日：</td>
				<td width="280"><select id="year" name="year"></select>年 <select id="month"
					name="month"></select>月 <select id="day" name="day"></select>日
					<div id="errorBirthday" style="color: red;"></div></td>
			</tr>
			<tr>
				<td width="70" class="data_text">宝宝性别：</td>
				<td width="280"><span><input name="addSex" type="radio"
						checked="checked" value="M" />男</span><span><input name="addSex"
						type="radio" value="F" />女</span>
				</td>
			</tr>
			<tr>
				<td colspan="2"><hr>
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			yearMonthDay($("#addBaby"));
		</script>
	</div>
	
	<div class="delete_friend" id="delete_baby_dialog"
	style="display: none; width: 326px;">
	<h4>
		<a href="javascript:void(0)" onclick="deleteBabyCancel();" id="delete_baby_cancel"></a><span id="messageTitle">删除宝宝</span>
	</h4>
	<div class="delete_friendText">
		<div class="newsList_img2">
			<div class="own_img">
				<img id="delete_baby_dialog_avatar" width="58" height="58"
					src="images/avatar/baby.jpg" alt="我的宝宝" />
			</div>

		</div>
		<p id="message1">
			删除后将不能恢复，您确定此操作？
		</p>
	</div>
	<div class="delete_friendAn" style="width: 294px;">
		<div class="h_button fr ml5" onclick="deleteBabyCancel();">
			<strong>取 消</strong>
		</div>
		<div class="h_button fr" id="delete_baby_submit">
			<strong>确 定</strong>
		</div>
		<div class="clear"></div>
	</div>
</div>
